import * as React from "react"
import { observer, inject } from "mobx-react"
import { px2dp, storage } from "../../utils"
import {
  Text,
  TouchableWithoutFeedback,
  View,
  ViewStyle,
  Image,
  ImageStyle,
  TouchableOpacity
} from "react-native"
import { images } from "../../assets"
import { color } from "../../theme"
import routerId from "../../consts/routerId"

export interface AuthProps {
  rootStore?: any
  history?: any
}

const styledMineHeader: ViewStyle = {
  flexDirection: "row",
  paddingLeft: px2dp(18),
  paddingRight: px2dp(18),
  height: px2dp(82),
  alignItems: "center",
  justifyContent: "space-between",
  backgroundColor: color.palette.black
}

const styledAvatarContent: ViewStyle = {
  flexDirection: "row",
  alignItems: "center"
}

const styledWallet: ViewStyle = {
  flexDirection: "row",
  padding: px2dp(18),
  height: px2dp(84),
  borderBottomWidth: px2dp(1),
  borderStyle: "solid",
  borderBottomColor: "#E0E2E7"
}

const styledWalletLeft: ViewStyle = {
  flex: 1,
  borderRightWidth: px2dp(1),
  borderStyle: "solid",
  borderRightColor: "#E0E2E7"
}

const styledWalletRight: ViewStyle = {
  flex: 1,
  flexDirection: "row"
}

const styledAmount: ViewStyle = {
  flexDirection: "row",
  alignItems: "center"
}

const styledWalletConfig: ViewStyle = {
  flex: 1,
  alignItems: "center"
}

const styledConfigImage: ImageStyle = {
  width: px2dp(40),
  height: px2dp(40)
}

const styledAvatarImage: ImageStyle = {
  width: px2dp(54),
  height: px2dp(54),
  marginRight: px2dp(10)
}

@inject("rootStore")
@observer
class AuthScreen extends React.Component<AuthProps, {}> {
  showStorage = () => {
    storage.loadString("token").then(data => {
      console.log(data)
    })
  }
  render() {
    // const globalStore = this.props.rootStore.globalStore
    return (
      <View style={{ backgroundColor: "#fff" }}>
        <TouchableWithoutFeedback>
          <View style={styledMineHeader}>
            <View style={styledAvatarContent}>
              <Image
                resizeMode={"contain"}
                style={styledAvatarImage}
                source={{ uri: "http://m.ld1121.com/125669346c3c5bc837d91b5b793cecaf.png" }}
              />
              <Text style={{ color: "#fff" }} onPress={() => this.showStorage()}>
                username
              </Text>
            </View>
          </View>
        </TouchableWithoutFeedback>

        <View style={styledWallet}>
          <View style={styledWalletLeft}>
            <View style={styledAmount}>
              <Image source={images.mine.icons.wallet} />
              <Text style={{ fontSize: 12, marginLeft: px2dp(6) }}>我的钱包</Text>
            </View>
            <View>
              <Text style={{ fontSize: 18 }}>98738.00</Text>
            </View>
          </View>
          <View style={styledWalletRight}>
            <View style={styledWalletConfig}>
              <TouchableOpacity
                onPress={() => {
                  this.props.history.push(routerId.rechargeable)
                }}
              >
                <Image
                  style={styledConfigImage}
                  resizeMode={"contain"}
                  source={images.mine.icons.recharge}
                />
                <Text style={{ fontSize: 12 }}>充值</Text>
              </TouchableOpacity>
            </View>
            <View style={styledWalletConfig}>
              <Image
                style={styledConfigImage}
                resizeMode={"contain"}
                source={images.mine.icons.withdraw}
              />
              <Text style={{ fontSize: 12 }}>提现</Text>
            </View>
          </View>
        </View>
      </View>
    )
  }
}
export default AuthScreen
